<template>
	<div class="footer">
		<div class="item" v-for="item,index in chooseBtn" @click="choosePage(item,index)">
			<img :src="item.active?item.imgActive:item.imgNormal">
			<div class="text" v-text="item.text" :style="{color:item.active?'#309fea':'#555'}"></div>
		</div>
	</div>
</template>
<script>
	export default{
		props:['page'],
		data(){
			return {
				chooseBtn:[
					{
						active:true,
						text:'资产分析',
						path:'/pages/Asset',
						imgNormal:require('../assets/images/analysis-asset2x.png'),
						imgActive:require('../assets/images/analysis-asset-sel2x.png')
					},
					{
						active:false,
						text:'证券分析',
						path:'/pages/Stock',
						imgNormal:require('../assets/images/analysis-stock2x.png'),
						imgActive:require('../assets/images/analysis-stock-sel2x.png')
					},
					{
						active:false,
						text:'月度分析',
						path:'/pages/Month',
						imgNormal:require('../assets/images/analysis-month2x.png'),
						imgActive:require('../assets/images/analysis-month-sel2x.png')
					}
				],
				pageEvent:['002024','002025','002026'],
				pageNum:0
			}
		},
		created(){
			this.chooseBtn.forEach(value=>{
				value.active=false;
			});
			this.chooseBtn[this.page].active=true;
		},
		methods:{
			choosePage(item,index){
				if(this.$store.state.pageNum != index){
					TDAPP.onEvent(this.pageEvent[index],'');
					TDAPP.send();
				}
				this.$store.dispatch('setPageNum',index)

				this.$router.replace(this.chooseBtn[index].path);
			}
		}
	}
</script>
<style scoped>
	.footer{
		width: 100%;
		height: 0.5rem;
		background: #fff;
		box-shadow: 0 -0.01rem 0.03rem 0 rgba(34,34,34,0.2);
		position: fixed;
		bottom: 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 19999999;
	}
	.footer .item{
		width: 1px;
		height: 100%;
		display: inline-flex;
		flex-direction: column;
		flex-grow: 1;
		justify-content: space-around;
		align-items: center;
	}
	.footer img{
		height: 0.2rem;
	}
	.footer .text{
		font-size: 0.12rem;
		color: #555;
	}
</style>
